<template>
  <Nav>
    {{ $t('dao.nav') }}
    <template #right>
      <div @click="router.push('/dao/my')">{{ $t('dao.my') }}</div>
    </template>
  </Nav>
  <div class="page-dao">
    <div class="content">
      <div class="tabs">
        <div class="item" :class="{ on: tabs == 0 }" @click="getTab(0)">{{ $t('dao.tabs.0') }}</div>
        <div class="item" :class="{ on: tabs == 1 }" @click="getTab(1)">{{ $t('dao.tabs.1') }}</div>
      </div>
      <div class="create" v-if="tabs == 1 && !userData.pledge" @click="create.open()">{{ $t('dao.create') }}</div>
      <template v-for="item in data">
        <div class="box animate__fadeIn animate__animated animate__faster">
          <div class="name wrap">{{ item.name }}</div>
          <div class="tongji">
            <div class="item">
              <div class="title">{{ $t('dao.poundage') }}</div>
              <div class="num self"><md-amount :value="item.poundage" :precision="0" transition></md-amount>%</div>
            </div>
            <div class="item">
              <div class="title">{{ $t('dao.allow_num') }} (HWD)</div>
              <div class="num"><md-amount :value="Number(item.allow_num)" :precision="0" transition></md-amount></div>
            </div>
            <div class="item">
              <div class="title">{{ $t('dao.exist_num') }} (HWD)</div>
              <div class="num"><md-amount :value="Number(item.exist_num)" :precision="0" transition></md-amount></div>
            </div>
            <div class="item" v-if="item.income">
              <div class="title">{{ $t('dao.income') }} ({{ item.income[0].date }})</div>
              <div class="num"><md-amount :value="Number(item.income[0].poundage_income)" :precision="2" transition></md-amount></div>
            </div>
          </div>
          <div class="progress">
            <div class="ok flash" :style="{ width: item.prop }"></div>
          </div>
          <div class="btn-group">
            <div class="btn self" v-if="tabs == 1" @click="update.open(item)">{{ $t('dao.self') }}</div>
            <div class="btn" v-if="item.open == 'on'" @click="btn.open(item)">{{ $t('dao.btn') }}</div>
          </div>
        </div>
      </template>
      <div class="page">
        <md-activity-indicator v-if="loading" type="carousel" color="#5d62a7" :size="15"></md-activity-indicator>
      </div>
    </div>
    <Btn ref="btn" @update="getData" />
    <Create ref="create" @update="getData" />
    <Update ref="update" @update="getData" />
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { toast, dialog } from '@/style'
import { t } from '@/lang'
import { get, self } from '@/api/dao'
import { userData, userInfo } from '@/model/user'
import Nav from '@/components/nav.vue'
import Btn from './btn.vue'
import Create from './create.vue'
import Update from './update.vue'

const router = useRouter()
const btn = ref(null)
const create = ref(null)
const update = ref(null)

const loading = ref(false)
const data = ref([])
const selfData = ref([])
const tabs = ref(0)

const getTab = type => {
  tabs.value = type
  data.value = []
  getData()
}

// 加载数据
const getData = () => {
  loading.value = true
  // 请求方式： 全网 / 个人
  const func = tabs.value ? self : get
  func().then(res => {
    data.value = res.data.map(item => {
      item.prop = (item.exist_num / item.allow_num * 100).toFixed(0) + '%'
      return item
    })
  }).finally(() => {
    loading.value = false
  })
  
  userInfo()
}

getData()

</script>

<style lang="scss" scoped>
  .page-dao{
    min-height: 100%;
    background: url('@/assets/page.jpg') center center no-repeat;
    background-size: cover;
    background-attachment:fixed;

    .content{
      padding: 130px 30px 10px;
      overflow: hidden;
    }
    
    .page{
      padding: 20px;
      display: flex;
      align-items: center;
      flex-direction: column;
    }
    
    .tabs{
      background: rgba(255,255,255, .1);
      padding: 5px;
      border-radius: 100px;
      overflow: hidden;
      display: flex;
      margin-bottom: 30px;
      
      .item{
        flex-grow: 1;
        text-align: center;
        color: #5d62a7;
        line-height: 35px;
        border-radius: 100px;
        transition: all .4s ease;
        
        &.on{
          background: #5d62a7;
          color: #fff;
        }
      }
    }
    
    .create{
      background: linear-gradient(to right, #ffc21b, #ffa723);
      color: #fff;
      line-height: 40px;
      border-radius: 50px;
      text-align: center;
      font-size: 16px;
      width: 50%;
      margin: 0 auto 30px;
    }

    .box{
      padding: 15px 20px;
      margin-bottom: 20px;
      border-radius: 10px;
      background: linear-gradient(to left, #292d70, #1d0f5e);
      overflow: hidden;
      position: relative;
      transition: all .4s ease;
      
      .name{
        color: #fff;
        font-size: 16px;
        line-height: 25px;
        overflow: hidden;
      }
      
      .tongji{
        margin-top: 10px;
        
        .item{
          width: 100%;
          padding: 4px 0;
          display: flex;
          justify-content: space-between;
          
          .title{
            color: #5d62a7;
            font-size: 12px;
          }
          .num{
            color: #8991f9;
            font-size: 14px;
            font-weight: 400;
            
            &.self{
              color: #ffc21b;
            }
            
            &.on{
              color: #1cd4b6;
            }
          }
        }
      }
      
      .progress{
        margin-top: 10px;
        height: 7px;
        padding: 2px;
        background: rgba(0, 0, 0, .2);
        border-radius: 50px;
        
        .ok{
          width: 0;
          background: linear-gradient(to right, #1cd4b6, #2385ff);
          height: 7px;
          border-radius: 50px;
        }
      }
      
      .btn-group{
        display: flex;
        justify-content: center;
        margin-top: 15px;
      }
      
      .btn{
        background: linear-gradient(to right, #1cd4b6, #2385ff);
        color: #fff;
        width: 40%;
        line-height: 35px;
        font-size: 16px;
        border-radius: 35px;
        text-align: center;
        margin: 0 10px;
        
        &.self{
          background: 0;
          border: 1px solid #1cd4b6;
          color: #1cd4b6;
        }
      }
    }
  }
</style>